<template>
	<div id="home_page">
		<div class="content">
			<div class="banner_all">
				<!--<div class="progress">
					<div class="progress_item" @click="bannerScroll(0)"></div>
					<div class="progress_item" @click="bannerScroll(1)"></div>
					<div class="progress_item" @click="bannerScroll(2)"></div>
				</div>-->
				<div class="banner_left_btn" @click="bannerPage(-1)"></div>
				<div class="banner_right_btn" @click="bannerPage(1)"></div>
				
				<div class="banner">
					<div class="banner_panel">
						<div class="banner1_content">
							<div class="banner1_btn" @click="openCourseDetail()"></div>
						</div>
						<!--<div class="banner_content">
							<div class="banner_text">
								在线幼儿
							</div>
							<div class="banner_text">
								数学思维启蒙
							</div>
							<div class="banner_btn">
								立即报名
							</div>
						</div>-->
					</div>
					<div class="banner_panel">
						<div class="banner1_content">
							<div class="banner1_btn" @click="openCourseDetail()"></div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="good">
				<div class="good_title">
					为什么选择小鳄鱼课堂
				</div>
				<div class="good_content">
					<div class="good_panel">
						<div class="good_mask"></div>
						<div class="good_img"></div>
						<div class="good_text_1">重新定义在线直播课程</div>
						<div class="good_text_2">二十年沉淀，威创研究院倾力打造</div>
					</div>
					<div class="good_panel">
						<div class="good_mask"></div>
						<div class="good_img"></div>
						<div class="good_text_1">拒绝枯燥，越学越上瘾</div>
						<div class="good_text_2">在线直播，任务是趣味课堂</div>
					</div>
					<div class="good_panel">
						<div class="good_mask"></div>
						<div class="good_img"></div>
						<div class="good_text_1">与金牌教室互动闯关</div>
						<div class="good_text_2">故事性互动教学，来一次探险游戏</div>
					</div>
					<div class="good_panel">
						<div class="good_mask"></div>
						<div class="good_img"></div>
						<div class="good_text_1">关注到每一个孩子</div>
						<div class="good_text_2">小班1v8授课，让每个孩子都有发言机会</div>
					</div>
					<div class="good_panel">
						<div class="good_mask"></div>
						<div class="good_img"></div>
						<div class="good_text_1">让学习效果看得见</div>
						<div class="good_text_2">课前课后测评，保证效果</div>
					</div>
						<div class="good_panel">
						<div class="good_mask"></div>
						<div class="good_img"></div>
						<div class="good_text_1">不再担心孩子学习进度</div>
						<div class="good_text_2">固定班级，固定老师</div>
					</div>
				</div>
			</div>
			
			<div class="stage">
				<div class="stage_title">哈佛案例教学法</div>
				<div class="stage_content">
					根据我国教育部《3-6岁儿童学习与发展指南》，融合美国共同核心州立标准CCSS，采用哈佛案例教学法，通过思维培养，
					让孩子学会发现问题，处理问题和解决问题的能力。
				</div>
				<div class="stage_img"></div>
			</div>
			
			<div class="power">
				<div class="power_title">
					数学知识和思维能力综合培养<br/>
					提升解决问题能力
				</div>
				<div class="power_img"></div>
			</div>
			
			<div class="teach_fun">
				<div class="teach_fun_title">小鳄鱼5步教学法</div>
			</div>
			
			<div class="teacher">
				<div class="teacher_title">与清华北大名师直接对话</div>
				<div class="teacher_content">
					<div class="teacher_panel">
						<div class="teacher_img"></div>
						<div class="teacher_name">张洁</div>
						<div class="teacher_text">
							金色摇篮全程实验学校校长<br>
							23年一线教育教学经验，荣获“北京市金牌教师”等称号
						</div>
					</div>
					<div class="teacher_panel">
						<div class="teacher_img"></div>
						<div class="teacher_name">李桓</div>
						<div class="teacher_text">
							国内幼小衔接高级专家<br/>
							20年儿童教育从教经验
						</div>
					</div>
					<div class="teacher_panel">
						<div class="teacher_img"></div>
						<div class="teacher_name">徐健峰</div>
						<div class="teacher_text">
							中国人民大学高材生<br/>
							儿童教育产品负责人
						</div>
					</div>
				</div>
			</div>
			
			
			
			<!--<div class="ability">
				<div class="ability_title">
					学习能力立竿见影，全面培养孩子8项核心能力
				</div>
				<div>
					<div class="ability_panel">
						<div class="ability_content">
							好奇心
						</div>
					</div>
					<div class="ability_panel">
						<div class="ability_content">
							专注力
						</div>
					</div>
					<div class="ability_panel">
						<div class="ability_content">
							观察力
						</div>
					</div>
					<div class="ability_panel">
						<div class="ability_content">
							创造力
						</div>
					</div>
					<div class="ability_panel">
						<div class="ability_content">
							记忆力
						</div>
					</div>
					<div class="ability_panel">
						<div class="ability_content">
							解决问题
						</div>
					</div>
					<div class="ability_panel">
						<div class="ability_content">
							运算能力
						</div>
					</div>
					<div class="ability_panel">
						<div class="ability_content">
							逻辑推理
						</div>
					</div>
				</div>
			</div>-->
			
			<!--<div class="team">
				<div class="team_title">卓越的精英教师团队</div>
				<div class="team_content">以孩子为中心，以鼓励关爱孩子为主导，丰富的一线教学经验，帮助孩子更好成长</div>
			</div>-->
			
			<div class="audition">
				<div class="audition_title">
					如何免费试听体验课
				</div>
				<div>
					<div class="audition_panel">
						<div class="audition_mask"></div>
						<div class="audition_content">
							<div class="audition_img"></div>
							<div class="audition_text_1">1</div>
							<div class="audition_text_2">在线报名</div>
							<div class="audition_text_3">注册免费领取</div>
							<div class="audition_text_3">价值399元的试听课程</div>
						</div>
					</div>
					<div class="audition_panel">
						<div class="audition_mask"></div>
						<div class="audition_content">
							<div class="audition_img"></div>
							<div class="audition_text_1">2</div>
							<div class="audition_text_2">顾问预约</div>
							<div class="audition_text_3">专属顾问为您的</div>
							<div class="audition_text_3">孩子安排试听时间</div>
						</div>
					</div>
					<div class="audition_panel">
						<div class="audition_mask"></div>
						<div class="audition_content">
							<div class="audition_img"></div>
							<div class="audition_text_1">3</div>
							<div class="audition_text_2">开始上课</div>
							<div class="audition_text_3">进入在线教师开始上课</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="promise">
				<div class="promise_title">我们的承诺</div>
				<div class="promise_content">
					<div class="promise_panel">
						<div class="promise_detail">
							<div class="promise_img animated"></div>
							<div class="promise_text_1">
								专业师资
							</div>
							<div class="promise_text_2">
								研发团队10年以上经验，一线资深名师，严格筛选和培训
							</div>
						</div>
					</div>
					<div class="promise_panel">
						<div class="promise_detail">
							<div class="promise_img animated"></div>
							<div class="promise_text_1">
								品牌资历
							</div>
							<div class="promise_text_2">
								威创集团上市公司，儿童成长领域龙头品牌，品质有保障
							</div>
						</div>
					</div>
					<div class="promise_panel">
						<div class="promise_detail">
							<div class="promise_img animated"></div>
							<div class="promise_text_1">
								售后无忧
							</div>
							<div class="promise_text_2">
								未完成的课时可随时申请退费，没有后顾之忧
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="bottom_seat"></div>
			<div class="bottom" :class="isFixed? 'bottom_fixed':''">
				<div class="bottom_content">
					<div class="bottom_logo"></div>
				</div>
			</div>
		</div>
		
		<advert></advert>
	</div>
</template>

<script>
import advert from '../common/advert'

var vm;
var $homeContent,$homePage;
var $banner,bannerLen;

export default {
	components : {
		advert
	},
	data : function() {
		return {
			isFixed : false,
			bIndex : 0,
			bTimer : null,
			isWait : true
		}
	},
	methods : {
		openCourseDetail : function() {
			router.push({path:"/course_detail/course_detail", query : $route.query});
		},
		setFixed : function() { //设置底部栏定位样式
			//内容整体高度
			var h1 = $homePage.outerHeight();
			//容器高度+滚动高度
			var h2 = $homeContent.height() + $homeContent.scrollTop();
			//大于,说明内容还有部分没展示,即底部栏还未出现,固定样式
			vm.isFixed = (h1 > h2)
		},
		setLeft : function() {
			//需要滚动的距离发生改变,重新定位
			var left = vm.bIndex * $banner.width();
			$banner.scrollLeft(left);
		},
		bannerLoop : function(callback) {
			vm.isWait = false;
			
			vm.bIndex++;
			
			//计算要滚动的距离
			var left = vm.bIndex * $banner.width();
			$banner.animate({scrollLeft : left},1500,"easeOutCubic",function() {
				vm.setLeft();
				
				if(vm.bIndex == bannerLen-1) {
					vm.bIndex = 0;
					$banner.scrollLeft(0);
				}
				//动画结束后循环回调自己
				callback();
				vm.isWait = true;
			})
		},
		bannerPage : function(num) {  //横幅翻页
			//停止其他动画
			$banner.stop(true,false);
			//如果循环动画不是等待期,即执行动画过程被打断,则触发不到动画结束的回调,需要重新设置循环动画
			if(!vm.isWait) {
				vm.isWait = true;
				vm.bTimer = setTimer(vm.bannerLoop,10000);
			}
			
			vm.bIndex += num;
			//如果翻到最前页,还往前翻,则定位到末尾辅助页,再滚动到倒数第二页
			if(vm.bIndex == -1) {
				vm.bIndex = bannerLen - 2;
				var left = (bannerLen - 1) * $banner.width();
				$banner.scrollLeft(left);
			}
			//如果翻到末尾辅助页,还往后翻,则定位到首页,再滚动到第二页
			if(vm.bIndex == bannerLen) {
				vm.bIndex = 1;
				$banner.scrollLeft(0);
			}
			//执行滚动
			var left = vm.bIndex * $banner.width();
			$banner.animate({scrollLeft : left},1500,"easeOutCubic",function() {
				//动画结束,如果在辅助页,则回到第一页
				if(vm.bIndex == bannerLen-1) {
					vm.bIndex = 0;
				}
				vm.setLeft();
			});
		}
	},
	mounted : function() {
		$homeContent = $(".home_content");
		$homePage = $("#home_page");
		
		//页面初始设置
		vm.setFixed();
		//监听滚动事件和窗口大小改变事件
		$homeContent.scroll(vm.setFixed);
		$(window).resize(function() {
			vm.setFixed();
			vm.setLeft();
		});

		//定义横幅元素
		$banner = $(".banner");
		bannerLen = $(".banner_panel").length;
		
		//初次开始循环定时器,周期10s
		vm.bTimer = setTimer(vm.bannerLoop,10000);
		
		//承诺栏,鼠标上移添加动画
		$(".promise_detail").hover(function() {
			var $img = $(this).find(".promise_img");
			$img.addClass("swing");
			//动画结束后移除
			setTimeout(function(){
				$img.removeClass("swing");
			},1000)
		},function(){})
		
		
		
		
	},
	created : function() {
		vm = this;
	}
}

//自定义循环定时器
function setTimer(fun,time) {
	var timer = {id : ""};
	loop();
	
	function loop() {
		if(timer.id!=null) {
			timer.id = setTimeout(function(){
				fun(loop)
			},time);
		}
	}
	return timer;
}
//停止定时器
function clearTimer(timer) {
	clearTimeout(timer.id);
	timer.id = null;
}
</script>

<style scoped lang="scss" src="../../style/home_page/home_page.css"></style>